<template>
    <div>
        <el-row>
            <el-col :span="8">
                <el-card shadow="always">
                    <div class="user">
                        <img src="../assets/headimg.jpg" alt="头像加载失败">
                        <div class="userInfo">
                            <p class="name">{{ name }}</p>
                            <p class="access">{{ access }}</p>
                        </div>
                    </div>
                    <div class="loginInfo">
                        <p class="lastLoginTime">上次登录的时间：{{ lastLoginTime }}</p>
                        <p class="lastLoginAdd">上次登录的地点：{{ lastLoginAdd }}</p>
                    </div>
                </el-card>
                <!-- 展示数据，测试。 将来根据需求具体写 -->
                <el-card shadow="hover" style="margin-top: 10px;height: 460px;">
                    <el-table :data="users" resizable="false" stripe border :highlight-current-row="true">
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="age" label="年龄"></el-table-column>
                        <el-table-column prop="email" label="邮箱"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="16">
                <div class="right-col">
                    <el-card class="r-little-card" shadow="hover" v-for="(item, key) in countData"
                        body-style="display:flex;">
                        <i :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
                        <div class="info">
                            <span class="t1">{{ item.name }}</span>
                            <span class="t2">{{ item.value }}</span>
                        </div>
                    </el-card>
                </div>
                <div class="graph">
                    <div class="d1">
                        <el-card class="zhe" style="text-align: -webkit-center;">
                            <!-- 柱状图 -->
                            <div ref="echarts1" style="width: 700px;height: 260px;"></div>
                        </el-card>
                    </div>
                    <div class="d2">
                        <el-card class="zhu">
                            折线图
                            <div ref="echarts2" style="width: 200px;height: 150px;"></div>
                        </el-card>
                        <el-card class="bing" style="text-align:-webkit-center;">
                            饼状图
                            <div ref="echarts3" style="width: 400px;height: 250px;"></div>
                        </el-card>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getData, getAllSeasonTotal,AllYearTotal } from "../api/home.js"
import * as echarts from 'echarts'

export default {
    name: 'Home',
    data() {
        return {
            name: "admin",
            access: '超级管理员',
            lastLoginTime: '2023-6-13 14:25:56',
            lastLoginAdd: '河南',
            users: [],
            countData: [
                { name: '迄今总数', value: NaN, icon: 'star-on', color: '#0000FF' },
                { name: '一月总数', value: NaN, icon: 's-order', color: '#5D3FD3' },
                { name: '四月总数', value: NaN, icon: 's-order', color: '#FFD700' },
                { name: '七月总数', value: NaN, icon: 's-order', color: '#FF7518' },
                { name: '十月总数', value: NaN, icon: 's-order', color: '#F33A6A' },
                { name: '续作总数', value: NaN, icon: 'orange', color: '#F33A6A' },
                { name: '原创总数', value: NaN, icon: 'orange', color: '#F33A6A' },
                { name: '其他总数', value: NaN, icon: 'orange', color: '#F33A6A' },
            ],
        }
    },
    mounted() {
        //获取 allseason数据
        getAllSeasonTotal().then(res => {
            if (res.data.code === 0) {
                this.$message({
                    type: 'error',
                    message: res.data.msg
                })
                return;
            }
            var data = res.data.data;
            var jan = data.filter((item) => { return item.season == '一月' })[0]
            var apr = data.filter((item) => { return item.season == '四月' })[0]
            var jul = data.filter((item) => { return item.season == '七月' })[0]
            var oct = data.filter((item) => { return item.season == '十月' })[0]
            this.countData[0].value = (jan.total + apr.total + jul.total + oct.total) + 160
            this.countData[1].value = jan.total + 40
            this.countData[2].value = apr.total + 40
            this.countData[3].value = jul.total + 40
            this.countData[4].value = oct.total + 40

            //圆环图
            // echarts 示例
            var e3 = echarts.init(this.$refs.echarts3)
            var option3 = {
                title: {
                    text: '各季度番剧总数',
                    left: 'center',
                    top: 'center'
                },
                tooltip:{
                    formatter:'{c}'
                },
                series: [
                    {
                        type: 'pie',
                        name: '总数',
                        data: [
                            {
                                value: jan.total + 40,
                                name: '一月'
                            },
                            {
                                value: apr.total + 40,
                                name: '四月'
                            },
                            {
                                value: jul.total + 40,
                                name: '七月'
                            },
                            {
                                value: oct.total + 40,
                                name: '十月'
                            }
                        ],
                        radius: ['60%', '80%']
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            e3.setOption(option3);

        }).catch(error => {
            this.$message({
                type: 'error',
                message: '请求接口出错'
            })
        })

        //柱状图
        //获取 AllYearTotal数据
        AllYearTotal().then(res => {
            if (res.data.code === 0) {
                this.$message({
                    type: 'error',
                    message: res.data.msg
                })
                return;
            }
            //柱状
            // echarts 示例
            var e1 = echarts.init(this.$refs.echarts1)
            var option1 = {
                title: {
                    text: '各年度番剧总数'
                },
                tooltip: { name: '番剧' },
                legend: {
                    data: ['总数']
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                },
                series: [
                    {
                        name: '总数',
                        type: 'bar',
                        data: []
                    }
                ]
            };
            var data = res.data.data;
            option1.xAxis.data=data.years
            option1.series[0].data=data.total
            console.log(data,"柱状图");
            // 使用刚指定的配置项和数据显示图表。
            e1.setOption(option1);

        }).catch(error => {
            this.$message({
                type: 'error',
                message: '请求接口出错，，嘿嘿嘿'
            })
        })


        this.users = [
            { id: 21, name: "张三", age: 23, email: "zhangsan@qq.com" },
            { id: 22, name: "李四", age: 24, email: "lisi@qq.com" },
            { id: 23, name: "王五", age: 25, email: "wangwu@qq.com" },
            { id: 24, name: "赵六", age: 26, email: "zhaoliu@qq.com" },
        ]
    }
}  
</script>
<style scoped lang="less">
.user {
    display: flex;
    align-items: center;
    line-height: none;

    img {
        margin-right: 40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    .userInfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: grey;
        }
    }
}

.loginInfo {
    .lastLoginTime .lastLoginAdd {
        font-size: 32px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        line-height: none;
    }

    text-align: left;
    line-height: none;
}

.r-little-card {
    width: 22%;
    margin-bottom: 5px;

    i {
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
    }

    .info {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .t1 {
            font-size: 15px;
            padding-left: 5px;
        }

        .t2 {
            font-size: 20px;
        }
    }
}

.right-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 5px;
}

.graph {
    .d1 {
        .zhe {
            height: 260px;
            margin-left: 5px;
        }
    }

    .d2 {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;

        .zhu {
            width: 48%;
            height: 280px;
            margin-left: 5px;
        }

        .bing {
            width: 48%;
            height: 280px;
        }
    }
}
</style>